<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>祥愿堂</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/public.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #2780E8;
        }

        header {
            height: 1.3rem;
            margin: 0;
            background-color: #2780E8;
        }

        /*头部*/
        .header {
            display: none;
            position: fixed;
            /* 决定了搜索框置顶 */
            left: 0;
            right: 0;
            top: 0;
            background-color: #2780E8;
            z-index: 10;
        }

        .header.on {
            display: block;
        }

        .header .my {
            position: relative;
            top: -1.5rem;
            background: #2E8EFF;
            height: 4.38rem;
            display: block;
            z-index: 100;
        }

        .header .my .myback {
            height: 1.2rem;
            width: .8rem;
            display: inline-block;
            background: url(../image/ucenter/back_white.png);
            background-position: center center;
            background-size: .8rem .8rem;
            background-repeat: no-repeat;
            position: relative;
            left: 1.3rem;
            top: 2.65rem;
            z-index: 100;
        }

        .header .my .right {
            position: absolute;
            right: 0;
            top: 2rem;
            width: 2.8rem;
            height: 2.8rem;
            background: url(../image/ucenter/setting.png);
            background-position: center center;
            background-size: .9rem .9rem;
            background-repeat: no-repeat;
        }

        .header .friends {
            position: relative;
            background: #F8F8FE;
            display: block;
        }

        .header .friends .goback {
            height: 1.2rem;
            width: .8rem;
            display: inline-block;
            background: url(../image/ucenter/goback.png);
            background-position: center center;
            background-size: .8rem .8rem;
            background-repeat: no-repeat;
            position: absolute;
            left: 1.3rem;
            top: 1.2rem;
            z-index: 100;
        }

        .header .friends .title {
            text-align: center;
            font-size: .75rem;
            color: #000000;
            height: 5rem;
            line-height: 4rem;
        }


        /**底部切换栏**/
        /*底部*/
        footer {
            color: #000000;
            height: 2.2rem;
            background-color: #F8F8FE;
            border-top: 1px solid #ddd !important;
        }

        .flex-wrap .bar-tab-item {
            position: relative;
            text-align: center;
        }

        .flex-wrap .bar-tab-item .bar-tab-label {
            display: block;
            font-size: .6rem;
            position: relative;
            height: 1rem;
            line-height: 1rem;
            top: 1.1rem;
        }

        .flex-wrap .bar-tab-item .icon {
            position: absolute;
            left: 0;
            width: 100%;
            height: 1.3rem;
        }

        .flex-wrap .bar-tab-item .main {
            background: url(../image/footer_one.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .active .main {
            background: url(../image/footer_one_active.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .bar-tab-item .friends {
            background: url(../image/footer_two.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .active .friends {
            background: url(../image/footer_two_active.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .bar-tab-item .ucenter {
            background: url(../image/footer_three.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .active .ucenter {
            background: url(../image/footer_three_active.png);
            background-position: center center;
            background-size: 1.2rem 1.2rem;
            background-repeat: no-repeat;
        }

        .flex-wrap .active {
            color: #2E8EFF;
        }

        .zhezhao {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="flex-vertical" id="rootWarp" v-cloak>
        <!--  头部 -->
        <header id="header">
            <div class="header" :class="{on:headers.show==0}" v-for="(headers,index) in header">
                <!--首页头部--->
                <!-- <div class="search"  v-if="headers.name=='main'">

              </div> -->
                <!--问诊页面标题--->
                <div class="friends" v-if="headers.name=='friends'">
                    <!-- <span class="goback" onclick="closeWin()"></span> -->
                    <div class="title">患者管理</div>
                </div>
                <!--个人中心头部-->
                <!-- <div class="my" v-if="headers.name=='ucenter'">

              </div> -->
            </div>
        </header>
        <!--  sectionflex-con -->
        <section class="flex-con"></section>

        <!--  底部 -->
        <footer id="footer" class="flex-wrap">
            <div class="bar-tab-item flex-con" :class="{active:footers.show==0}" v-for="(footers,index) in footer"
                @click="fnChange(index);">
                <i class="icon" :class="fnAddcs(footers.id)"></i>
                <div class="bar-tab-label">{{footers.name}}</div>
            </div>
        </footer>

        <div class="zhezhao" v-if="show"></div>
    </div>
</body>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../script/chat/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../script/chat/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../script/chat/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../script/chat/SHA1.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        //初始化vue
        fnInitVue();

        api.addEventListener({
            name: 'closeShow'
        }, function (ret, err) {
            window.rootVue.show = false
        });
        api.addEventListener({
            name: 'closeChat'
        }, function (ret, err) {
            window.rootVue.fnChange(1)
        });

        if (!$api.getStorage("first_login") || $api.getStorage("first_login") == "false") {
            window.rootVue.show = true
        } else {
            window.rootVue.show = false
        }

        api.addEventListener({
            name: 'login'
        }, function (ret, err) {
            window.rootVue.fnChange(0)
            window.rootVue.show = true
        });
    };
    //  设置底部点击初始化0防止多次重复点击
    var eliminate = 0;

    function fnInitVue() {
        window.rootVue = new Vue({
            el: '#rootWarp',
            data: {
                header: [],
                footer: [],
                show: true,
            },
            created: function () {
                var $this = this;
            },
            mounted: function () {
                var that = this;
                this.$nextTick(function () {
                    fnRequest();
                    fnInit();
                    // 调取环信接口监听新消息
                    that.fnAddMessageListener();
                });
            },
            methods: {
              fnAddMessageListener: function () {
                  var that = this;
                  var easeChat = api.require('easeChat');
                  easeChat.addMessageListener({
                      name: 'receive'
                  }, function (ret) {
                      if (ret) {
                          //获取到消息刷新一下会话列表
                          that.fnGetAllConversations();
                      } else {
                          toast("糟糕，开小差了:" + ret.msg);
                      }
                  });
              },

              // 获取环信会话列表
              fnGetAllConversations: function () {
                  var that = this;
                  easeChat = api.require('easeChat');
                  easeChat.getAllConversations(function (ret) {
                      var _total = 0;
                      for (var i in ret.conversations) {
                          _total += ret.conversations[i].unreadMessagesCount;
                      }
                      //存储未读消息总数
                      $api.setStorage('unread_total', _total);
                      //刷新底部导航消息数

                      that.fnNewsBadge(_total);
                      // //刷新会话列表消息
                      // api.execScript({
                      //     name: 'main',
                      //     frameName: 'message',
                      //     script: 'fnRequestList(' + JSON.stringify(ret) + ');'
                      // });
                  });
              },
              // //追加一条最新数据
              // fnAddanew: function(data_, addanew_) {
              //     var that = this;
              //     var eMessageFromDB = data_;
              //     // alert(JSON.stringify(eMessageFromDB[0]))
              //     if (eMessageFromDB[0].ext.card == "1" || eMessageFromDB[0].ext.card == "2") {
              //         eMessageFromDB[0].body.text = JSON.parse(decodeURIComponent(eMessageFromDB[0].body.text))
              //     }
              //     // alert(JSON.stringify(eMessageFromDB[0]))
              //     //新旧数组拼接
              //     message_data = data_.concat(message_data);
              //
              //     // 定义俩条消息超过俩分钟间隔显示发送时间
              //     if (message_data.length != 0) {
              //         var timevalue = parseFloat(eMessageFromDB[0].localTime) - parseFloat(message_data.pop().localTime);
              //         if (timevalue > 120000) {
              //             eMessageFromDB[0].time = eMessageFromDB[0].localTime;
              //         }
              //     } else {
              //         eMessageFromDB[0].time = eMessageFromDB[0].localTime;
              //     }
              //     if (addanew_) {
              //         // 追加最新一条
              //         window.ListVue.chat = window.ListVue.chat.concat(eMessageFromDB);
              //     }
              // },
              // 设置最新消息数
              fnNewsBadge: function (_number) {
                  if (_number >= 0) {
                      $api.setStorage('unread_total', _number);
                  }
                  if (_number < 99) {
                      this.footer[0].number = _number;
                  } else {
                      this.footer[0].number = '99+';
                  }
              },
              // 底部图标状态
              fnAddcs: function (id) {
                  if (id == 0) {
                      return "main"; //主页图标
                  }
                  if (id == 1) {
                      return "friends"; //问诊图标
                  }
                  if (id == 2) {
                      return "ucenter"; //个人中心图标
                  }
              },
              //底部tab
              fnChange: function (index) {
                  // 防止重复点击
                  if (index == eliminate) {
                      return;
                  }
                  eliminate = index;
                  if (index == 1) {
                      sendting("nowClick")
                  }
                  // // 改变头部显示
                  // this.header[index].num = 0;
                  // // 改变底部显示
                  // this.footer[index].num = 0;
                  fnActiveIndex(index)
                  //改变页面

              }
            }
        })
    }

    function closeWin() {
        api.historyBack(function (ret, err) {
            if (!ret.status) {
                api.closeWin();
            }
        });
    }
    // 头部、底部json
    function fnRequest() {
        window.rootVue.header = [{
            "id": 0,
            "name": "main",
            "show": 0
        }, {
            "id": 1,
            "name": "friends",
            "show": 1
        }, {
            "id": 2,
            "name": "ucenter",
            "show": 1
        }]
        window.rootVue.footer = [{
            "id": 0,
            "name": "工作台",
            "show": 0,
            "url": "main/frame0"
        }, {
            "id": 1,
            "name": "患者管理",
            "number": 0,
            "show": 1,
            "url": "chat/chat_list"
        }, {
            "id": 2,
            "name": "我的",
            "show": 1,
            "url": "user/frame2"
        }]
    }

    var eHeader, eFooter, headerH, footerH;

    function fnInit() {
        //双击退出
        keyListen();
        eHeader = $api.byId('header');
        eFooter = $api.byId('footer');
        // 设置头部底部fixStatusBar fixTabBar 状态栏跟ios底部栏的自适应高度
        setStatusBar("transparent", "light");
        // 获取头部底部高度
        headerH = $api.offset(eHeader).h;
        footerH = $api.offset(eFooter).h;
        // 初始化group
        fninitFrameGroup();

    }

    function fninitFrameGroup() {

        var frames = [];
        for (var i = 0; i < window.rootVue.footer.length; i++) {
            frames.push({
                name: window.rootVue.footer[i].url,
                url: './' + window.rootVue.footer[i].url + '_frm.html',
                bounces: false,
                reload: true,
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                bgColor: '#F8F8FE'
            });
        };
        api.openFrameGroup({
            name: 'main_group',
            rect: {
                marginLeft: 0,
                marginTop: headerH,
                marginBottom: footerH,
                marginRight: 0,
                // x: 0,
                // y: headerH,
                // w: 'auto',
                h: api.winHeight - headerH - footerH
            },
            scrollEnabled: false,
            preload: 0,
            index: 0,
            frames: frames
        }, function (ret, err) {
            fnActiveIndex(ret.index)
        });
    }
    //  设置底部跟头部选中状态num
    function fnActiveIndex(index) {
        api.setFrameGroupIndex({
            name: 'main_group',
            index: index
        });
        // 头部
        for (var i = 0; i < window.rootVue.header.length; i++) {
            if (i == index) {
                window.rootVue.header[i].show = 0;
            } else {
                window.rootVue.header[i].show = 1;
            }
        }
        // 底部
        for (var i = 0; i < window.rootVue.footer.length; i++) {
            if (i == index) {
                window.rootVue.footer[i].show = 0;
            } else {
                window.rootVue.footer[i].show = 1;
            }
            if ((typeof window.rootVue.footer[i].number != "undefined")) {
                window.rootVue.footer[i].number = $api.getStorage('show_unread_total');
            }
        }
    }


</script>

</html>
